<template>
  <div class="footer">
    <ul class="db tac">
      <li v-for="(item, index) in list" :key="index" class="item">
        <div
          @click="jump(item.path, index)"
          :class="activeTitle === item.name ? 'on' : ''"
        >
          <img
            :src="activeTitle === item.name ? item.activeImg : item.imgurl"
            alt
          />
          <span>
            {{ item.title }}
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: this.$t("page.doc124"),
          imgurl: require("../assets/images/ico_home.png"),
          name: "home",
          activeImg: require("../assets/images/ico_home_on.png"),
          path: "/",
        },
        {
          title: this.$t("page.doc123"),
          name: "promote",
          imgurl: require("../assets/images/ico_tg.png"),
          activeImg: require("../assets/images/ico_tg_on.png"),
          path: "/promote/index",
        },
        {
          title: this.$t("page.doc122"),
          name: "income",
          imgurl: require("../assets/images/ico_fx.png"),
          activeImg: require("../assets/images/ico_fx_on.png"),
          path: "/income/index",
        },
        {
          title: this.$t("page.doc121"),
          name: "record",
          imgurl: require("../assets/images/ico_jl.png"),
          activeImg: require("../assets/images/ico_jl_on.png"),
          path: "/home/record",
        },
        {
          title: this.$t("title.doc12"),
          name: "my",
          imgurl: require("../assets/images/ico_my.png"),
          activeImg: require("../assets/images/ico_my_on.png"),
          path: "/my/index",
        },
      ],
    };
  },
  props: ["activeTitle"],
  mounted() {},
  methods: {
    jump(url, index) {
      this.$router.push(url);
    },
  },
};
</script>
<style lang="less" scoped>
#main {
  &.w856 {
    .footer {
      width: 100%;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: auto;
  max-width: 10rem;
  width: 100%;
  background: var(--CObackgroundLinear2);
  box-shadow: 0rem 0.07rem 0.2rem 0rem #030303;
  z-index: 11;
  border-radius: 14px 14px 0 0;
  border-top: 1px solid #292d32;

  ul {
    padding: 10px 0;
    //background-color: #181c21;

    li {
      width: 24%;

      div {
        img {
          vertical-align: top;
          height: 0.44rem;

          &.on {
            height: 0.96rem;
            width: 0.96rem;
            margin-bottom: -0.1rem;
          }
        }

        span {
          display: block;
          margin-top: 0.07rem;
          opacity: 0.9;
          font-size: 0.22rem;
          font-weight: 400;
          color: #666666;
          line-height: 0.28rem;
        }

        &.on {
          span {
            color: #FFDD9A;
            opacity: 1;
          }
        }
      }
    }

    li:nth-child(3) {
      div {
        img {
          &.on {
            width: 1.24rem !important;
            height: 1.24rem !important;
            position: relative;
            bottom: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
